<template>
    <el-row class="collegeSelect">
        <el-col :span="8">
            <el-select style="margin-top: 15px;margin-left: 5px;" @change="collegeChange" v-model="plantPageParam.collegeId"
                class="selectItem" placeholder="请选择高校" clearable>
                <el-option v-for="item in collegeOptions" :label="item.collegeName" :value="item.collegeId" />
            </el-select>
        </el-col>
        <el-col :span="16">
            <el-row :gutter="16">
                <el-col :span="8">
                    <div class="statistic-card">
                        <el-statistic :value="37623">
                            <template #title>
                                <div style="display: inline-flex; align-items: center">
                                    当前网站学生数
                                    <el-tooltip effect="dark" content="仅统计完成校园认证的用户" placement="top">
                                        <el-icon style="margin-left: 4px" :size="12">
                                            <Warning />
                                        </el-icon>
                                    </el-tooltip>
                                </div>
                            </template>
                        </el-statistic>
                        <div class="statistic-footer">
                            <div class="footer-item">
                                <span>同比上月</span>
                                <span class="green">
                                    23%
                                    <el-icon>
                                        <CaretTop />
                                    </el-icon>
                                </span>
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="statistic-card">
                        <el-statistic :value="1370">
                            <template #title>
                                <div style="display: inline-flex; align-items: center">
                                    今日访问量
                                    <el-tooltip effect="dark" content="仅统计访问校园模块的数量" placement="top">
                                        <el-icon style="margin-left: 4px" :size="12">
                                            <Warning />
                                        </el-icon>
                                    </el-tooltip>
                                </div>
                            </template>
                        </el-statistic>
                        <div class="statistic-footer">
                            <div class="footer-item">
                                <span>同比昨日</span>
                                <span class="red">
                                    12%
                                    <el-icon>
                                        <CaretBottom />
                                    </el-icon>
                                </span>
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="statistic-card">
                        <el-statistic :value="7200" title="New transactions today">
                            <template #title>
                                <div style="display: inline-flex; align-items: center">
                                    校园作品数
                                </div>
                            </template>
                        </el-statistic>
                        <div class="statistic-footer">
                            <div class="footer-item">
                                <span>同比上月</span>
                                <span class="green">
                                    16%
                                    <el-icon>
                                        <CaretTop />
                                    </el-icon>
                                </span>
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </el-col>
    </el-row>
    <el-empty v-if="pageTotal === 0" description="抱歉没有找到相关的作品" />
    <el-space wrap>
        <el-card v-for="(item, index) in plantList" :body-style="{ padding: '0px' }" class="plantItem"
            @click="toDetail(item.plantId, item.id, item.collegeAddress, item.collegeName)">
            <img :src="item.plantPicture" class="image" />
            <div style="padding: 14px;">
                <span>{{ item.plantName }}</span>
                <el-tag style="margin-left: 10px;" :type="item.userName === '管理员' ? 'success' : ''">{{ item.userName
                }}</el-tag>
                <div class="bottom">
                    <span class="time">{{ item.address }}</span>
                    <span class="author">{{ formatterDate(item.createTime) }}</span>
                </div>
                <div class="bottom">
                    <span class="author"><el-icon>
                            <School />
                        </el-icon>{{ item.collegeName }}</span>
                </div>
            </div>
        </el-card>
    </el-space>
    <div class="pageBlock">
        <el-pagination v-model:current-page="plantPageParam.currentPage" v-model:page-size="plantPageParam.pageSize"
            :page-sizes="[15, 25, 50, 100]" layout="total, sizes, prev, pager, next, jumper" :total="pageTotal"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
</template>
  
<script setup lang="ts">
import {
    School,
    CaretBottom,
    CaretTop,
    Warning,
} from '@element-plus/icons-vue'
import { useCollegeListApi, useCollegePlantListApi } from '@/api/college/college';
import { ref, reactive, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router';
import { useRequest } from 'vue-request';
import { formatterDate } from '@/util/dateFormat';

const router = useRouter()

const { data } = useRequest(useCollegeListApi())
const collegeOptions = computed(() => {
    return data.value?.data || []
})
const collegeChange = async (val: any) => {
    query()
}

const plantPageParam = reactive({
    currentPage: 1,
    pageSize: 15,
    collegeId: '',
})

const pageTotal = ref(0)
const plantList = ref()


const query = async () => {
    const { data, total } = await useCollegePlantListApi(plantPageParam)
    pageTotal.value = total
    plantList.value = data
}
onMounted(() => {
    query()
})

function handleSizeChange() {
    query()
}
function handleCurrentChange() {
    query()
}

const toDetail = (plantId: any, id: any, collegeAddress: any, collegeName: any) => {
    // sessionStorage.setItem("navigation_index",'2')
    // const collegePlant = {
    //     collegePlantId: id,
    //     collegeAddress: collegeAddress,
    //     collegeName: collegeName
    // }
    // sessionStorage.setItem("collegePlant", JSON.stringify(collegePlant))
    router.push({
        name: 'detail'
        , params: { id: plantId }
    })
}

</script>
  
<style lang="scss" scoped>
.time {
    font-size: 12px;
    color: #999;
}

.author {
    font-size: 12px;
    color: #414141;
}

.bottom {
    margin-top: 13px;
    line-height: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.button {
    padding: 0;
    min-height: auto;
}

.image {
    width: 100%;
    height: 200px;
    display: block;
}

.plantItem {
    cursor: pointer;
    width: 286px;
}

.collegeSelect {
    height: 100px;
    line-height: 20px;
    padding: 20px;
    margin-bottom: 10px;
    border: 1px solid #efefef;
    background-color: #fff;
}

.selectItem {
    margin-right: 20px;
}

.pageBlock {
    text-align: center;
    margin-top: 20px;
    margin-left: 530px;
}


:global(h2#card-usage ~ .example .example-showcase) {
    background-color: var(--el-fill-color) !important;
}

.el-statistic {
    --el-statistic-content-font-size: 28px;
}

.statistic-card {
    // height: 100%;
    // padding: 20px;
    border-radius: 4px;
    // background-color: var(--el-bg-color-overlay);
}

.statistic-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--el-text-color-regular);
}

.statistic-footer .footer-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.statistic-footer .footer-item span:last-child {
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
}

.green {
    color: var(--el-color-success);
}

.red {
    color: var(--el-color-error);
}
</style>